import FyComponent from '@/components/common/Interval'
import { View } from '@tarojs/components'
// import './index.scss'
import classNames from 'classnames'
import styles from './index.module.scss'
import { calcSurplusTime } from "@/utils/utils"

interface IProps {
  seconds: number
  onTimeUp?: any
}

export default class ExchangeCountdown extends FyComponent<IProps, {}> {
  state: any

  constructor() {
    super()
    this.state = {
      time: calcSurplusTime()
    }
  }

  //  倒计时回调
  onIntervalCallBack(time) {
    this.setState({
      time
    })
  }

  render() {
    const { time } = this.state
    const prefixCls = 'count-down'
    return (<View className={classNames(styles[prefixCls], 'bnn-number')}>
      <h3 className={styles[`${prefixCls}-title`]}>兑换倒计时</h3>
      <View className={styles[`${prefixCls}-list`]}>
        <View className={styles[`${prefixCls}-number`]}>{this.formatNum(time.hours)}</View>
        <View className={styles[`${prefixCls}-unit`]}>:</View>
        <View className={styles[`${prefixCls}-number`]}>{this.formatNum(time.minutes)}</View>
        <View className={styles[`${prefixCls}-unit`]}>:</View>
        <View className={styles[`${prefixCls}-number`]}>{this.formatNum(time.seconds)}</View>
        <View className={styles[`${prefixCls}-unit`]}>:</View>
        <View className={styles[`${prefixCls}-number`]}>{this.formatNum(time.millisecond)}</View>
      </View>
      {/*{!!time.hours && <Text className='count-down__box'>{this.formatNum(time.hours)}</Text>}{!!time.hours && ':'}*/}
      {/*<Text className='count-down__box'>{this.formatNum(time.minutes)}</Text>:*/}
      {/*<Text className='count-down__box'>{this.formatNum(time.seconds)}</Text>:*/}
      {/*<Text className='count-down__box'>{this.formatNum(time.millisecond)}</Text>*/}
    </View>)
  }
}
